<template>
  <div class="dashboard-container">
    <!-- 顶部欢迎区域 -->
    <el-card class="welcome-section">
      <div class="welcome-header">
        <div class="welcome-title">
          <h2>科研与学术活动管理系统</h2>
          <p class="welcome-subtitle">
            基于主流技术栈构建，提供完整的科研与学术活动管理功能
          </p>
        </div>
        <div class="user-info">
          <div class="user-avatar">
            <el-avatar :size="50" :src="avatar ? avatar + '?imageView2/1/w/80/h/80' : ''"
              icon="el-icon-user"></el-avatar>
          </div>
          <div class="user-details">
            <div class="user-name">{{ username }}</div>
            <div class="user-roles">
              <template v-if="userInfo && userInfo.role && userInfo.role.length">
                <el-tag type="success" size="mini" effect="plain">
                  角色:{{ userInfo.role }}
                </el-tag>
              </template>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="welcome-footer">
        <div class="time-info">
          <i class="el-icon-time"></i> {{ currentTime }}
        </div>
        <div class="developer-info">
          <i class="el-icon-s-custom"></i> 开发者：张子涵、陈兴瑶、戴幔
        </div>
      </div>
    </el-card>

    <!-- 开发工具展示区域 -->
    <el-card class="tools-section">
      <div slot="header" class="tools-header">
        <i class="el-icon-collection-tag"></i>
        <span>开发工具与技术栈</span>
      </div>
      <div class="tools-container">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(tool, index) in devTools" :key="index">
            <div class="tool-card">
              <div class="tool-icon">
                <img :src="tool.logo" :alt="tool.name" />
              </div>
              <div class="tool-content">
                <h3>{{ tool.name }}</h3>
                <p>{{ tool.description }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  name: "Dashboard",
  data() {
    return {
      currentTime: "",
      timer: null,
      devTools: [
        {
          name: "IntelliJ IDEA",
          logo: "https://resources.jetbrains.com/storage/products/intellij-idea/img/meta/intellij-idea_logo_300x300.png",
          description: "专业Java开发IDE，提供智能代码补全、重构工具和框架支持",
        },
        {
          name: "Spring Boot",
          logo: "https://spring.io/img/logos/spring-initializr.svg",
          description: "简化Spring应用开发的框架，实现快速构建生产级应用",
        },
        {
          name: "Vue.js",
          logo: "https://vuejs.org/images/logo.png",
          description: "渐进式JavaScript框架，用于构建用户界面的MVVM框架",
        },
        {
          name: "MyBatis-Plus",
          logo: "https://baomidou.com/assets/asset.cIbiVTt_.svg",
          description: "MyBatis的增强工具，简化开发、提高效率的持久层框架",
        },
        {
          name: "Redis",
          logo: "https://logowik.com/content/uploads/images/redis.jpg",
          description:
            "高性能的内存数据库，用于缓存和会话存储，提升系统响应速度",
        },
        {
          name: "阿里云OSS",
          logo: "https://www.bing.com/th/id/OIP.Fdkp1PXTFLkOUbw7L7MPvwAAAA?w=158&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
          description:
            "阿里云对象存储服务，用于存储和管理系统中的文件和图片资源",
        },
      ],
    };
  },
  computed: {
    ...mapState("user", ["username", "userInfo", "avatar"]),
  },
  methods: {
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hour = String(now.getHours()).padStart(2, "0");
      const minute = String(now.getMinutes()).padStart(2, "0");
      const second = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
  },
  mounted() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

.welcome-section {
  .welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .welcome-title {
      h2 {
        margin: 0;
        color: #303133;
        font-size: 22px;
      }

      .welcome-subtitle {
        margin: 8px 0 0;
        color: #909399;
        font-size: 14px;
      }
    }

    .user-info {
      display: flex;
      align-items: center;

      .user-avatar {
        margin-right: 12px;
      }

      .user-details {
        .user-name {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 5px;
        }

        .user-roles {
          display: flex;
          gap: 5px;
        }
      }
    }
  }

  .welcome-footer {
    display: flex;
    justify-content: space-between;
    color: #606266;
    font-size: 14px;

    i {
      margin-right: 5px;
      color: #409eff;
    }

    .developer-info {
      font-weight: bold;
      background-color: #ecf5ff;
      padding: 5px 10px;
      border-radius: 4px;
      border-left: 3px solid #409eff;

      i {
        color: #409eff;
      }
    }
  }
}

.tools-section {
  .tools-header {
    display: flex;
    align-items: center;

    i {
      color: #409eff;
      margin-right: 5px;
    }
  }

  .tools-container {
    padding: 10px 0;

    .tool-card {
      height: 100%;
      padding: 15px;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 20px;

      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
      }

      .tool-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .tool-content {
        h3 {
          margin: 0 0 10px;
          color: #303133;
          font-size: 16px;
        }

        p {
          margin: 0;
          color: #606266;
          font-size: 13px;
          line-height: 1.5;
        }
      }
    }
  }
}
</style>
